<template>
  <div>
    <section class="todoapp">
      <header class="header">
        <!-- 使用 v-model 绑定 newTodo, 监听 keyup 事件，同时使用修饰器， .enter, 按enter 键时事件才触发 -->
        <input class="new-todo" placeholder="接下来做什么？" v-model="newTodo" @keyup.enter="addTodo">
      </header>
      <section class="main" v-show="todos.length">
        <ul class="todo-list">
          <!-- v-for 遍历所有备忘， key绑定备忘 id， class绑定样式 -->
          <li v-for="todo in todos" class="todo" :key="todo.id" 
          :class="{ completed: todo.completed, editing: todo.id == editedTodo.id }">
          <div class="view">
            <!-- 选择某条备忘 -->
            <!-- v-model 绑定是否选中 -->
            <input class="toggle" type="checkbox" v-model="todo.completed">

            <!-- 双击可操作备忘 -->
            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>

            <!-- 删除某条备忘 -->
            <button class="destory" @click="removeTodo(todo)"></button>
          </div>

          <input class="edit" type="text" v-model="editedTodo.title"
            @blur="doneEdit(editedTodo)"
            @keyup.enter="doneEdit(editedTodo)"
            @keyup.esc="cancelEdit()">
          </li>
        </ul>

        <footer class="footer" v-show="todos.length">
          <span class="todo-count">
            <!-- remaining 计算剩余未完成的数量，pluralize 用来过滤单位是否要负数 -->
            <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
          </span>
          <!-- 当有已完成的备忘时，出现一键移除按钮 -->
          <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
            Clear completed
          </button>
        </footer>
      </section>
    </section>
  </div>

</template>

<script>
let id = 1;
export default {
  data() {
    return {
      // 所有备忘
      todos: [],
      // 新装备忘
      newTodo: "",
      // 修改中的备忘
      editedTodo: {},
    }
  },
  computed: {
    // 计算未完成的备忘
    remaining() {
      return this.todos.filter( x => !x.completed).length
    }
  },

  filters: {
    // 计算单位
    pluralize(num) {
      // 如果是多个，则加复数
      return num > 1 ? 'items' : 'item'
    }
  },
  
  methods: {
    // 新增备忘
    addTodo() {
      // 内容为空，不处理
      if(!this.newTodo) {
        return;
      }
      // 最后新增的备忘插在最前面，使用 unshift，不是 push
      this.todos.unshift({
        id: id++,
        title: this.newTodo,
        completed: false,
      });

      this.newTodo = "";
    },

    // 编辑备忘
    editTodo(todo) {
      // 将待编辑的内容填充到修改的内容中，使用 ... 解构，相当于使用 object.assign,属于浅copy
      this.editedTodo = { ...todo };
    },

    doneEdit(todo) {
      // 将编辑中的内容更新到列表中
      this.todos = this.todos.map( x => {
        return todo.id === x.id ? {...todo} : {...x}
      })
      // 准备下次编辑
      this.editedTodo = {};
    },

    cancelEdit() {
      this.editedTodo = {};
    },

    removeTodo(todo) {
      const index = this.todos.findIndex(x => x.id === todo.id);
      this.todos.splice(index, 1);
    },

    removeCompleted() {
      this.todos = this.todos.filter(x => !x.completed);
    }
  }
}
</script>
<!--css style-->
<style>
@import "https://unpkg.com/todomvc-app-css@2.1.0/index.css";
</style>